/* 
静态属性：ele
动态方法：
    init()  获取元素 点击事件
*/

class Register {
    constructor(ele) {
        this.ele = ele;
        this.init();
    }
    init() {
        //获取元素
        this.phoneNumWrap = $('#phoneNumWrap');
        this.phoneNum = $('#phoneNum');
        this.passWrap = $('#passWrap');
        this.kadPass = $('#kadPass');
        this.msgCodeWrap = $('#msgCodeWrap');
        this.msgCode = $('#msgCode');
        this.getRandomCode = $('#getRandomCode');
        this.getRegister = $('#getRegister');


        //验证码的生成
        this.getRandomCode.on('click', () => {
                //调用验证码插件
                this.getRandomCode.html('').css('padding', 0).css('border', 0);
                this.c = new GVerify({
                    id: 'getRandomCode',
                    type: 'number',
                    length: 4
                });


            })
            //点击注册
        this.getRegister.on('click', () => {
                this.onRegister();
            })
            //输入时，删除输入有误显示的红色提示框(如果存在的话)
        this.phoneNum.on('keyup', () => {
            if (this.phoneTip) {
                this.phoneTip.remove();

            }
            if (this.phoneNum.val() && this.kadPass.val() && this.msgCode.val() && !this.phoneTip && !this.passTip && !this.codeTip) {
                console.log(this.kadPass.val());
                this.getRegister.css('backgroundColor', 'blue');
            }
        })
        this.kadPass.on('keyup', () => {
            if (this.passTip) {
                this.passTip.remove();
            }
            if (this.phoneNum.val() && this.kadPass.val() && this.msgCode.val() && !this.phoneTip && !this.passTip && !this.codeTip) {
                this.getRegister.css('backgroundColor', 'blue');
            }
        })
        this.msgCode.on('keyup', () => {
            if (this.codeTip) {
                this.codeTip.remove();
            }
            if (this.phoneNum.val() && this.kadPass.val() && this.msgCode.val() && !this.phoneTip && !this.passTip && !this.codeTip) {
                this.getRegister.css('backgroundColor', 'blue');
            }
        })
    }
    onRegister() {
        if (this.phoneTip) {
            this.phoneTip.remove();
        }
        if (this.passTip) {
            this.passTip.remove();
        }
        if (this.codeTip) {
            this.codeTip.remove();
        }
        //先判断手机号、密码、验证码是否都有填
        if (!this.phoneNum.val()) {
            alert('请输入手机号');
            return;
        }
        if (!this.kadPass.val()) {
            alert('请设置密码');
            return;
        }
        if (!this.msgCode.val()) {
            alert('请输入验证码');
            return;
        }

        //验证手机号是否合法
        if (!(/^1[3456789]\d{9}$/.test(this.phoneNum.val()))) {
            this.phoneTip = $('<span></span>');
            this.phoneTip.appendTo(this.phoneNumWrap).html('手机号码不合法,请重新输入！').css({ color: 'red', fontSize: '14px', position: 'absolute', right: '-200px', top: '50%', transform: 'translateY(-50%)' });
            // this.getRegister.css('backgroundColor', '#b5b5b5');
            this.flag1 = false;
        } else {
            this.flag1 = true;
        }

        //密码需要在6~12位，只能是字母数字下划线
        if (!(/^\w{6,12}$/.test(this.kadPass.val()))) {
            this.passTip = $('<span></span>');
            this.passTip.appendTo(this.passWrap).html('密码需由6~12位的字母、数字、下划线组成!').css({ color: 'red', fontSize: '14px', position: 'absolute', right: '-293px', top: '50%', transform: 'translateY(-50%)' });
            // this.getRegister.css('backgroundColor', '#b5b5b5');
            this.flag2 = false;
        } else {
            this.flag2 = true;
        }

        //验证码的匹配
        //有获取验证码和没有获取验证码两种情况
        if (/\s[\u4e00-\u9fa5]{9}\s/g.test(this.getRandomCode.text())) {
            this.codeTip = $('<span></span>');
            this.codeTip.appendTo(this.msgCodeWrap).html('请获取验证码!').css({ color: 'red', fontSize: '14px', position: 'absolute', right: '-105px', top: '50%', transform: 'translateY(-50%)' });
            // this.getRegister.css('backgroundColor', '#b5b5b5');
            this.flag3 = false;
        } else if (!this.c.validate(this.msgCode.val())) {

            this.codeTip = $('<span></span>');
            this.codeTip.appendTo(this.msgCodeWrap).html('验证码错误!').css({ color: 'red', fontSize: '14px', position: 'absolute', right: '-90px', top: '50%', transform: 'translateY(-50%)' });
            // this.getRegister.css('backgroundColor', '#b5b5b5');
            this.flag3 = false;

        } else {
            this.flag3 = true;
        }

        //如果所有条件都符合，则注册成功
        if (this.flag1 && this.flag2 && this.flag3) {
            alert('注册成功，请记住您的账号与密码，即将跳转到登录页面！');
            location.replace('./login.html');
        } else {
            return
        }
    }
}

new Register($('.container'));